<!DOCTYPE html>
<html>
<head>
  <title>Sample Page</title>
  <link rel="stylesheet" type="text/css" href="tile-view.css">
  <link rel="stylesheet" type="text/css" href="jquery-ui-1.8.21.custom.css">
  <script type="text/javascript" src="jquery-1.7.2.js"></script>
  <script type="text/javascript" src="jquery-ui-1.8.21.custom.js"></script>
  <script type="text/javascript" src="knockout-2.1.0.debug.js"></script>
  <script type="text/javascript" src="tile-view.js"></script> 
  <script type="text/javascript" src="tile-view-binding.js"></script> 
  <script type="text/javascript">
            // Class to represent a row in the seat reservations grid
            function Services(name, machineName, currentMemory) {
                this.name = name;
                this.currentMemory = currentMemory;    
                this.machineName = machineName;
            }

            // Overall viewmodel for this screen, along with initial state
            function ServicesViewModel() {
                var self = this;
                // Non-editable catalog data - would come from the server
                self.services = ko.observableArray([      
                      new Services('Message Broker Crude-1','LsipApp1',34535),
                      new Services('Message Broker Crude-2','LsipApp2',66655),
                      new Services('Message Broker Crude-3','LsipApp3',21454),
                      new Services('Message Broker NGL-1','LsipApp1',54545),
                      new Services('Message Broker NGL-2','LsipApp2',645645),
                      new Services('Message Broker NGL-3','LsipApp3',376777),
                      new Services('Message Adapter Crude-1','LsipApp1',567567),
                      new Services('Message Adapter Crude-2','LsipApp2',645645),
                      new Services('Message Adapter Crude-3','LsipApp3',134343),
                      new Services('Message Adapter NGL-1','LsipApp1',3453455),
                      new Services('Message Adapter NGL-2','LsipApp2',675675),
                      new Services('Message Adapter NGL-3','LsipApp3',343455)
                    ]);    
            }
            $(function(){
              var vm = new ServicesViewModel();
              ko.applyBindings(vm);
              $('.tile-view').tileview({height: 450, width:800, tileHeight: 100, tileWidth: 200});

              // $('.tile-view').tileview({height: 'auto', width:'auto', tileHeight: 100, tileWidth: 200});


               $('#button').click(function() {
                  vm.services.push( new Services('Evil Steve Services','LsipApp1',400000));
               });


            });
  </script> 
</head>
<body>
  <div class="tile-view" data-bind="tileviewbinding: services">
    <div class="tile-view-tile">
      <div class="tile-view-header" data-bind="text: name"></div>
      <div class="tile-view-content-small">
        <div>
            <span>Machine Name:</span>
            <span  data-bind="text: machineName"></span>
        </div>
        <div>
            <span>Current Memory:</span>
            <span data-bind="text: currentMemory"></span>
        </div>        
      </div>
      <div class="tile-view-content-large">
        <div>
            <span>Machine Name:</span>
            <span  data-bind="text: machineName"></span>
        </div>
        <div>
            <span>Current Memory:</span>
            <span data-bind="text: currentMemory"></span>
        </div>        
        <div style="padding:5px; text-align:center; margin-top:5px" >          
          <span>Performance</span>
          <span>
            <img style="border:1px solid gray;" src="./images/performance2.jpg">
          </span>
          
        </div>
      </div>
    </div>  
  </div>
  <button id="button">Press Me</button>
</body>
</html>
